<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_Vue-根组件的使用</title>
  <!-- 
  在 Vue 3 中，根组件是 Vue 应用的入口点，负责初始化和渲染整个应用。以下是对 Vue 根组件使用的说明总结：

  1. 创建根组件
  根组件通常是一个 Vue 实例，它可以是一个单文件组件（ `.vue`  文件）或一个简单的 JavaScript 对象。根组件通常在  `main.js`  文件中创建和挂载。

  2. 示例代码
  以下是一个简单的 Vue 根组件的示例：
  // main.js
  import { createApp } from 'vue';
  import App from './App.vue'; // 导入根组件

  createApp(App).mount('#app'); // 创建应用并挂载到 DOM
  在这个例子中， `App.vue`  是根组件，而  `#app`  是一个在 HTML 中定义的挂载点。

  3. 根组件的结构
  根组件通常包含以下几个部分：
  - 模板部分：定义组件的 HTML 结构。
  - 脚本部分：包含组件的逻辑，例如数据、方法、生命周期钩子等。
  - 样式部分：定义组件的样式。

  示例：
  vue
  <template>
    <div>
      <h1>欢迎使用 Vue 3!</h1>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: '这是根组件的示例。',
      };
    },
  };
  </script>

  <style>
  h1 {
    color: blue;
  }
  </style>

  4. 根组件的特性
  - 响应式：根组件的数据是响应式的，任何数据的变化都会自动更新视图。
  - 生命周期钩子：根组件可以使用 Vue 的生命周期钩子（如  `mounted` 、 `created`  等）来执行特定的逻辑。
  - 嵌套组件：根组件可以包含其他子组件，形成组件树结构。

  5. 配置选项
  在创建根组件时，可以传递配置选项，例如：

  - 全局状态管理：可以使用 Vuex 进行状态管理。
  - 路由管理：可以使用 Vue Router 进行路由管理。
  - 插件：可以在根组件中使用 Vue 插件。

  6. 总结
  - 根组件：是 Vue 应用的入口点，负责初始化和渲染整个应用。
  - 结构：通常包含模板、脚本和样式部分。
  - 响应式：数据变化会自动更新视图。
  - 生命周期钩子：可以使用生命周期钩子来处理组件的不同阶段。
  - 嵌套组件：根组件可以包含其他子组件，形成组件树。
  -->
</head>
<body>

  <div id="app">
    <!-- 根组件的内容会渲染在这里 -->
    <h2>{{ message }}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    const { createApp } = Vue;

    const App = {
      data() {
        return {
          message: 'Hello Vue 3!',
        };
      },
    }

    createApp(App).mount('#app');

  </script>
  
</body>
</html>